<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form layout="vertical" :model="formState" ref="formRef" :rules="rules">
        <div class="option-column">
          <div class="column-title">账号信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="姓名" name="real_name">
                <a-input
                  v-model:value="formState.real_name"
                  placeholder="请输入姓名"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="账号" name="login_name">
                <a-input
                  v-model:value="formState.login_name"
                  placeholder="请输入账号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="启用状态">
                <a-select
                  v-model:value="formState.enabled"
                  placeholder="请选择启用状态"
                >
                  <a-select-option :value="false">启用</a-select-option>
                  <a-select-option :value="true">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="手机" name="mobile">
                <a-input
                  v-model:value="formState.mobile"
                  placeholder="请输入请输入手机号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="电子邮箱" name="email">
                <a-input
                  v-model:value="formState.email"
                  placeholder="请选择电子邮箱"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="初始密码" name="login_password">
                <a-input-password
                  v-model:value="formState.login_password"
                  placeholder="请输入密码"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="备注" name="remark">
                <a-input
                  v-model:value="formState.remark"
                  placeholder="请输入备注信息"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="经销商" name="dealer_id">
                <a-select
                  v-model:value="formState.dealer_id" :disabled="query.id!=null"
                  placeholder="请选择经销商"
                >
                  <a-select-option
                    v-for="(item, index) in dealerList"
                    :key="index"
                    :value="item.dealer_id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" @click="submitForm"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import api from "@/api";
import API from "@/api/administrator";
import router from "@/routers";
import {
  validateEmail,
  validateMobile,
  validatePassword,
} from "@/utils/validate";
import { message } from "ant-design-vue";
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
//获取当前url参数
const query = computed(() => route.query);
const formState = ref({
  real_name: "",
  login_name: "",
  login_password: "",
  dealer_id: null,
  enabled: null,
  mobile: "",
  email: "",
  remark: "",
  user_type_id: 0,
  roleIds: [],
});
const rules = ref({
  real_name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  login_name: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  login_password: [
    {
      required: true,
      validator: validatePassword,
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: false,
      validator: validateMobile,
      trigger: "blur",
    },
  ],
  email: [
    {
      required: false,
      validator: validateEmail,
      trigger: "blur",
    },
  ],
});
const formRef = ref(null);
const submitForm = async () => {
  formRef.value.validate().then(async () => {
    console.log(formState.value);
    if (query.value.id) {
      //编辑
      const res = await API.UserUpdate({
        ...formState.value,
        user_id: query.value.id,
      });
      console.log(res);
      if (res) {
        console.log(formState.value);
        // 只有当选择了经销商时才创建经销商用户关系
        if (formState.value.dealer_id) {
          let dealRes = await api.apiDealerUserCreatePost({
            dealer_id: formState.value.dealer_id,
            user_id: query.value.id,
          });
          console.log(222, dealRes);
        }
        formRef.value.resetFields();

        //提示编辑成功
        message.success("编辑成功");
        //后退
        router.go(-1);
      }
    } else {
      //新增
      const res = await API.UserCreateUserWithRoles({
        ...formState.value,
        create_time: new Date().getTime(),
      });
      console.log(res);
      if (res) {
        // 只有当选择了经销商时才创建经销商用户关系
        if (formState.value.dealer_id) {
          let dealRes = await api.apiDealerUserCreatePost({
            dealer_id: formState.value.dealer_id,
            user_id: res,
          });
          console.log(222, dealRes);
        }
        formRef.value.resetFields();
        //提示新增成功
        message.success("新增成功");
        //后退
        router.go(-1);
      }
    }
  });
};
const resetForm = () => {
  formState.value = {
    real_name: "",
    login_name: "",
    login_password: "",
    dealer_id: null,
    enabled: null,
    mobile: "",
    email: "",
    remark: "",
    user_type_id: 0,
    roleIds: [],
  };
  router.go(-1);
};
const getData = async () => {
  let params = {
    user_id: query.value.id,
  };
  const res = await API.UserFetchModel(params);
  formState.value = res;
  if(res.dealer_users && res.dealer_users.length > 0){
    formState.value.dealer_id = res.dealer_users[0].dealer_id;
  }
};
const dealerList = ref();
const getDealerOptions = async () => {
  const res = await api.apiUserMyDealersPost({});
  dealerList.value = res.data;

};
onMounted(async () => {
  await getDealerOptions();
  if (query.value.id) {
    await getData();
  }
});
</script>
